<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<style>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	body {
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #070707;
	}
	h1 {
		position: relative;
		color: #6b6868;
		font-size: 120px;
	}
	h1::after {
		content: '北极光之夜';
		top: 0;
		left: 0;
		position: absolute;
		color: transparent;
		background-image: linear-gradient(to left, rgb(0, 174, 255), rgb(0, 255, 85), rgb(212, 0, 255), rgb(0, 204, 255), rgb(238, 255, 0));
		background-clip: text;
		-webkit-background-clip: text;/*只在文本里显示颜色*/
		clip-path: circle(80px at 0% 50%);/*背景截取显示区域为圆形，半径为80px，圆心在0% 50%的位置*/
		animation: move 3s linear alternate infinite;
	}
	@keyframes move {/*不断改变圆心位置*/
		0% {
			clip-path: circle(80px at 0% 50%);
		}
		100% {
			clip-path: circle(80px at 100% 50%);
		}
	}
</style>
<body>
	<h1>北极光之夜</h1>
</body>
</html>
